<template>
    <div class="left">
        <div class="left-top" :style="{ transform: scaleX === -1 ? 'scaleX(-1)' : 'none' }">
            <div
                :style="{ transform: scaleX === -1 ? 'scaleX(-1)' : 'none', textAlign: scaleX === -1 ? 'right' : 'left' }">
                {{ title }}</div>
        </div>
        <div class="left-bottom">
            <div v-for="item in HomeLeftFirst" :key="item.id" class="home-left-first">
                <div>
                    <div class="home-left-first-first" :style="`background-image: url(${item.img})`"></div>
                    <div class="home-left-first-second">{{ item.title }}</div>
                    <div class="home-left-first-third" :style="`background-image: url(${item.imgBtm})`">{{ item.num }}亿
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';
const props = defineProps({
    title: {
        type: String,
        default: '标题'
    },
    scaleX: {
        type: Number,
        default: 1
    },
});
const HomeLeftFirst = ref([
    {
        id: 1,
        img: '/homePageImg/images/homeLeftFirst_02.png',
        imgBtm: '/homePageImg/images/homeLeftFirst_12.png',
        title: '一级企业',
        num: 2079,
    },
    {
        id: 2,
        img: '/homePageImg/images/homeLeftFirst_04.png',
        imgBtm: '/homePageImg/images/homeLeftFirst_13.png',
        title: '二级企业',
        num: 2079,
    },
    {
        id: 3,
        img: '/homePageImg/images/homeLeftFirst_06.png',
        imgBtm: '/homePageImg/images/homeLeftFirst_14.png',
        title: '三级企业',
        num: 2079,
    }
])
</script>

<style scoped>
/* 保持原有样式不变 */
.left {
    width: 100% !important;
    height: 100% !important;
    display: flex;
    flex-direction: column;
}

.left-top {
    height: 25%;
    background: url('/homePageImg/tl.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: 100% 100%;
    padding: 0 0 4% 0;
    font-size: 5px;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
}

.left-bottom {
    flex: 1;
    display: flex;
}

.chart-container {
    width: 100%;
    height: 100%;
}

.home-left-first {
    width: 100%;
    height: 100%;
    display: flex;
    /* justify-content: space-around; */
    align-items: center;
}

.home-left-first>div {
    flex: 1;
    width: 100%;
    height: 100%;
    text-align: center;
}

.home-left-first-first {
    width: 100%;
    height: 50%;
    /* background-image: url('/homePageImg/images/homeLeftFirst_02.png'); */
    background-repeat: no-repeat;
    background-size: 50% 100%;
    background-position: 50% 100%;
    /* transform: translateX(-25%); */
}

.home-left-first-second {
    width: 100%;
    height: 10%;
    font-size: 4px;
}

.home-left-first-third {
    width: 100%;
    height: 20%;
    background-image: url('/homePageImg/images/homeLeftFirst_12.png');
    background-repeat: no-repeat;
    background-size: 80% 100%;
    background-position: 50% 100%;
    filter: blur(0.1px);
    font-size: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* transform: translateX(-25%); */
}
</style>